<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        .main {
            width: 700px;
            margin: auto;
            background: #000;
        }

        .slides {
            height: 320px;
            position: relative;
        }

        .slides ul li {
            /* display: none; */
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: all .3s;
        }

        .slides li.active {
            /* display: block; */
            opacity: 1;
        }

        .slides .extra {
            width: 700px;
            height: 53px;
            line-height: 53px;
            position: absolute;
            bottom: 0px;
            background-color: rgba(0, 0, 0, .8);
            z-index: 10;
        }

        .slides .extra h3 {
            width: 82%;
            margin: 0;
            margin-right: 20px;
            padding-left: 20px;
            color: #98e404;
            font-size: 28px;
            float: left;
            font-weight: 500;
            font-family: "Microsoft Yahei", Tahoma, Geneva;
        }

        .slides .extra a {
            width: 30px;
            height: 29px;
            display: block;
            float: left;
            margin-top: 12px;
            margin-right: 3px;
            text-decoration: none;
            color: #fff;
            border: 1px solid;
            line-height: 29px;
            text-align: center;
        }

        .slides .extra a:hover {
            color: #98e404;
        }

        .slides .extra .prev {
            background-position: 0 0;
        }

        .slides .extra .prev:hover {
            background-position: -30px 0;
        }

        .slides .extra .next {
            background-position: -60px 0;
        }

        .slides .extra .next:hover {
            background-position: -90px 0;
        }

        .indicator {
            padding: 10px 0;
        }

        .indicator ul {
            list-style-type: none;
            margin: 0 0 0 4px;
            padding: 0;
            overflow: hidden;
        }

        .indicator ul li {
            position: relative;
            float: left;
            width: 60px;
            margin: 0 4px 0 5px;
            text-align: center;
            cursor: pointer;
        }

        .indicator li img {
            display: block;
            border: 0;
            text-align: center;
            width: 60px;
        }

        .indicator li .mask {
            width: 60px;
            height: 60px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, .4);
        }

        .indicator li .border {
            display: none;
            width: 54px;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 20;
            border: 3px solid #98e404;
        }

        /* li里面的mask 和 border 刚开始都是显示的 */
        /* 我们写一个样式 */
        .indicator .active .mask {
            display: none;
        }

        .indicator .active .border {
            display: block;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="slides">
            <ul>
                <li class="active"><a href="#"><img src="./imgs/timthumb(1).jpg" alt="第一张图" srcset=""></a></li>
                <li><img src="./imgs/timthumb(2).jpg" alt="第二张图" srcset=""></a></li>
                <li><img src="./imgs/timthumb(3).jpg" alt="第三张图" srcset=""></a></li>
                <li><img src="./imgs/timthumb(4).jpg" alt="第四张图" srcset=""></a></li>
            </ul>
            <div class="extra">
                <h3>第1张图的描述信息</h3>
                <a href="javascript:;" class="prev">←</a>
                <a href="javascript:;" class="next">→</a>
            </div>
        </div>
        <div class="indicator">
            <ul>
                <li class="active">
                    <img src="./imgs/timthumb(1).jpg" alt="" srcset="">
                    <span class="mask"></span>
                    <span class="border"></span>
                </li>
                <li>
                    <img src="./imgs/timthumb(2).jpg" alt="" srcset="">
                    <span class="mask"></span>
                    <span class="border"></span>
                </li>
                <li>
                    <img src="./imgs/timthumb(3).jpg" alt="" srcset="">
                    <span class="mask"></span>
                    <span class="border"></span>
                </li>
                <li>
                    <img src="./imgs/timthumb(4).jpg" alt="" srcset="">
                    <span class="mask"></span>
                    <span class="border"></span>
                </li>
            </ul>
        </div>
    </div>
    <script>
        // 需求1.小图标鼠标经过事件
        // 鼠标经过小图片，当前高亮，其余兄弟变淡，添加类
        let lis = document.querySelectorAll('.indicator li')
        let piclis = document.querySelectorAll('.slides li')
        let next = document.querySelector('.next')
        let text = document.querySelector('.extra h3')
        let prev = document.querySelector('.prev')
        let main = document.querySelector('.main')
        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('mouseenter', function () {
                document.querySelector('.indicator .active').classList.remove('active')
                this.classList.add('active')

                // 需求2.大图片跟随变化
                // 对应的大图片跟着显示，如果想要过渡效果，如果可以使用opacity效果，可以利用CSS淡入淡出的效果，添加类
                // 选出唯一的哪个active，删除类
                // 对应序号的哪个li,谁加上active这个类

                document.querySelector('.slides .active').classList.remove('active')
                piclis[i].classList.add('active')
                text.innerHTML = `
                第${i + 1}张图的描述信息
                `
                // 需求4.解决一个bug
                // 点击右侧按钮可以实现播放下一张，但是鼠标经过前面的，播放就会乱序
                // 解决方案：让变化量index重新赋值为当前鼠标经过的索引号
                // 鼠标经过哪个小li 他的索引号就是i
                // 右侧按钮是通过 index 来控制的
                index = i
            })

        }
        // 需求3.右侧按钮播放效果
        // 点击右侧按钮,可以自动播放下一张图片
        // 需要一个变化量 index 不断自增
        // 然后播放下一张图片
        // 如果到了最后一张,必须要还原为第一张图片
        // 教你一招: 索引号= 索引号 % 数组长度
        let index = 0
        next.addEventListener('click', function () {
            index++
            index = index % lis.length
            common()
        })
        // 需求5.左侧按钮播放效果
        prev.addEventListener('click', function () {
            index--
            if (index < 0) {
                index = lis.length - 1
            }
            index = index % lis.length
            common()
        })

        // 需求6.因为皂搓按钮和右侧按钮里面有大量相同的操作，可以封装一个函数common
        function common() {
            document.querySelector('.indicator .active').classList.remove('active')
            lis[index].classList.add('active')

            document.querySelector('.slides .active').classList.remove('active')
            piclis[index].classList.add('active')
            text.innerHTML = `
                第${index + 1}张图的描述信息
                `
        }

        // 需求7.开启定时器
        // 其实定时器自动播放，就相当于点击了左右侧按钮，此时只需要，right.click()
        let timer = setInterval(function () {
            next.click()
        }, 1000)

        // 需求8.
        // 鼠标进过(整个盒子)清除定时器
        main.addEventListener('mouseenter', function () {
            clearInterval(timer)
        })
        // 鼠标离开开启定时器
        main.addEventListener('mouseleave', function () {
            timer = setInterval(function () {
                next.click()
            }, 1000)
        })
    </script>
</body>

</html>